<template>
    <div>
        <el-row>
            <el-col class="rowcss1" :span="2">
                <div style="width: 100%;">
                    <span class="spancss">指派给我的</span>
                </div>
            </el-col>
            <el-col class="rowcss2" :span="22">
                    <template>
                        <el-table ref="singleTable" :data="tableData" highlight-current-row style="width: 100%;">
                            <!-- <el-table-column type="index" width="50">
                            </el-table-column> -->
                            <el-table-column property="custom" label="客户">
                            </el-table-column>
                            <el-table-column property="model" label="型号">
                            </el-table-column>
                            <el-table-column property="bugCode" label="bug编码">
                                <template slot-scope="scope">
                                    <router-link :to="{name:'Bugs',query:{code:scope.row.bugCode}}" class="link-type">
                                        {{ scope.row.bugCode }}
                                    </router-link>
                                </template>
                            </el-table-column>
                            <el-table-column label="严重程度" align="center" prop="level">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.problem_level" :value="scope.row.level" />
                                </template>
                            </el-table-column>
                            <el-table-column label="设备型号" align="center" prop="modelCode" />
                            <el-table-column label="不良率" align="center" prop="badPersentage" />
                        </el-table>

                        <!-- 分页组件 -->
                        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="getList" :auto-scroll="false"/>
                    </template>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { listBugs } from "@/api/business/bugs";
export default {
    name: 'OwnStatistics',
    dicts: ['problem_level'],
    data() {
        return {
            tableData: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                queryKey: '3'
            },
        };
    },
    computed: {
    },
    watch: {
    },
    created() {
        this.getList()
    },
    mounted() {
        this.timer = setInterval(() => {
            listBugs(this.queryParams).then(response => {
                this.tableData = response.rows;
                this.total = response.total;
            })
        }, 60000)
    },
    beforeDestry() {
        clearInterval(this.timer)
    },
    methods: {
        getList() {
            // 调用接口获取数据
            listBugs(this.queryParams).then(response => {
                // console.log(response)
                this.tableData = response.rows;
                this.total = response.total;
            })
        }
    },
};
</script>

<style scoped>
.rowcss1 {
    height: 260px;
    border-right: 2px solid rgb(52, 176, 225);
}

.rowcss2 {
    height: 260px;
    border: 2px solid skyblue;
    overflow: auto;
}

.spancss {
    writing-mode: vertical-rl;
    text-align: center;
    margin-top: 40px;
    color: rgb(26, 112, 146);
    font-weight: bolder;
    font-size: 20px;
    text-shadow: 0px 0px 6px rgb(26, 112, 146);
    letter-spacing: 0.5em;
}
</style>
